<template>
	<view>
		<view style="padding: 8rpx 24rpx;">
			<g-title-wrap label="基础样式" label-width="350">
				<g-tabs :list="list"></g-tabs>
			</g-title-wrap>
		</view>
		<view style="padding: 8rpx 24rpx;">
			<g-title-wrap label="默认选中(default-index)" label-width="350">
				<g-tabs :list="list2" :defaultIndex='2'></g-tabs>
			</g-title-wrap>
		</view>
		<view style="padding: 8rpx 24rpx;">
			<g-title-wrap label="颜色(line-color,text-color)" label-width="350">
				<g-tabs :list="list2" :defaultIndex='2' line-color='#2efff9' text-color="#2efff9"></g-tabs>
			</g-title-wrap>
		</view>
		<view style="padding: 8rpx 24rpx;">
			<g-title-wrap label="拓展插槽(slot-name:expand)" label-width="550">
				<g-tabs :list="list2" :defaultIndex='2' line-color='#2efff9' :slotWidth="30">
					<template slot="expand">
						<view style="font-size: 50rpx;" @click="handleClick">+</view>
					</template>
				</g-tabs>
			</g-title-wrap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						label: '全部'
					},
					{
						label: '美食'
					},
					{
						label: '装修'
					},
					{
						label: '电影'
					},
					{
						label: '生活'
					},
					{
						label: '杂志'
					},
					{
						label: '音乐'
					},
					{
							label: '吃饭'
						},
					
				],
				list2: [{
						label: '全部'
					},
					{
						label: '美食'
					},
					{
						label: '装修'
					},
					{
						label: '电影'
					},
				],
			};
		},
		methods:{
			handleClick(){
				alert('插槽被点击')
			},
		},
	}
</script>

<style lang="scss">

</style>
